<template>
	<div class="tag">
		<el-card class="box-card">
			<div slot="header" class="d-flex align-items-center">
				<img class="card-icon" src="../assets/biaoqian.png" />
				<span>{{$t('tag.tag')}}</span>
			</div>
			<div class="text item">
				<el-tag size="mini" class="tag-item" @click="tag('java',tag[0])">Java[{{list[0]}}]</el-tag>
				<el-tag size="mini" class="tag-item" type="success" @click="tag('node',list[1])">node[{{list[1]}}]</el-tag>
				<el-tag size="mini" class="tag-item" type="info" @click="tag('HTML',list[2])">HTML[{{list[2]}}]</el-tag>
				<el-tag size="mini" class="tag-item" type="warning" @click="tag('Mysql',list[3])">Mysql[{{list[3]}}]</el-tag>
				<el-tag size="mini" class="tag-item" type="danger" @click="tag ('Vue',list[4])">Vue[{{list[4]}}]</el-tag>
				<el-tag size="mini" class="tag-item" type="info" @click="tag('Hybrid app',list[5])">Hybrid-app[{{list[5]}}]</el-tag>
				<el-tag size="mini" class="tag-item" type="success" @click="tag('Android',list[6])">Android[{{list[6]}}]</el-tag>
				<el-tag size="mini" class="tag-item" type="success" @click="tag('other',list[7])">other[{{list[7]}}]</el-tag>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'tag',
		methods: {
			tag(name,num) {

				this.$router.push({
					name: 'tag',
					params: {
						'name': name,
						'num':num
					}
				});
			}
		},
		data(){
			return{
               list:[0,0,0,0,0,0,0,0]
			}
		},
		beforeMount(){
let c = this;

			 this.$http.get("/api/blog/getsum").then(res => {
	  
	  console.log(res.data.data.data);
	   let  activities = res.data.data.data;
		 
		 for(let i of activities){

if(i.label.toLowerCase() === "vue" ){

 
c.list.splice(4, 1, c.list[4]+1)

 
}
if(i.label.toLowerCase() === "java" ){
 
 c.list.splice(0, 1, c.list[0]+1)
}
if(i.label.toLowerCase() == "mysql" ){
 
  c.list.splice(3, 1, c.list[3]+1)
}
if(i.label.toLowerCase() === "node" ){
 
  c.list.splice(1, 1, c.list[1]+1)
}
if(i.label.toLowerCase() === "android" ){
 
 c.list.splice(6, 1, c.list[6]+1)
}
if(i.label.toLowerCase() === "hybrid app " ){
 
 c.list.splice(5, 1, c.list[5]+1)
}
	
	if(i.label.toLowerCase() == "HTML " ){
 
 c.list.splice(2, 1, c.list[2]+1)
}
	if(i.label.toLowerCase() == "other "){
 
 c.list.splice(2, 1, c.list[7]+1)
}	
		}

    });
		}
	}
</script>

<style scoped>
	.box-card .item:hover {
		color: #409EFF;
		cursor: pointer;
	}
	
	.box-card span {
		font-weight: bold;
	}
	
	.card-icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}
	
	.tag-item {
		margin-right: 10px;
	}
</style>